<template>
  <div id="recruitTable">
        <div v-if="canEdit">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-button icon="el-icon-plus" @click="addFormVisible1=true" type="success" style="float:right">新增</el-button>
        </div>
        <div v-else>
          <div><a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> 2023年拟落户毕业生名单.pdf</a></div>
        </div>
        <el-button v-if="!canEdit" icon="el-icon-download" type="primary" style="float:right">导出</el-button>
        <h1 style="text-align:center">2023年拟落户毕业生名单</h1>
        <el-dialog title="新增" :visible.sync="addFormVisible1" width="98%" top="20px">
          <h1 style="text-align:center">2023年拟落户毕业生详细信息表</h1>
          <el-form :model="editForm" label-width="200px" ref="editForm" :inline="true" style="padding:10px 0 0;clear:both" inline-message>
            <table cellspacing="0" cellpadding="0" class="mytable">
              <tr>
                <th style="width:120px; vertical-align: middle;">接收单位</th>
                <td style="vertical-align: middle;" colspan="5">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;">姓名</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
                <th style="width:120px; vertical-align: middle;">性别</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-select v-model="editForm.title" style="width:150px" />
                  </el-form-item>
                </td>
                <th style="width:120px; vertical-align: middle;">民族</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-select v-model="editForm.title" style="width:150px" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;">身份证号</th>
                <td style="vertical-align: middle;" colspan="3">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
                <th style="width:120px; vertical-align: middle;">婚姻状况</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-select v-model="editForm.title" style="width:150px" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;">学历</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-select v-model="editForm.title" style="width:150px" />
                  </el-form-item>
                </td>
                <th style="width:120px; vertical-align: middle;">生源地</th>
                <td style="vertical-align: middle;" colspan="3">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;" rowspan="2">毕业院校</th>
                <th style="width:120px; vertical-align: middle;">名称</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
                <th style="width:120px; vertical-align: middle;">毕业证书编号</th>
                <td style="vertical-align: middle;" colspan="2">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;">所在省份</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
                <th style="width:120px; vertical-align: middle;">学位证书编号</th>
                <td style="vertical-align: middle;" colspan="2">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;" colspan="2">户口迁出详细地址<br>（必须与户口迁移证或户口首页一致）</th>
                <td style="vertical-align: middle;" colspan="6">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;" colspan="2">户口迁出登记机关<br>（必须与户口迁移证或户口首页一致）</th>
                <td style="vertical-align: middle;" colspan="4">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;" colspan="2">户口迁入详细地址<br>（必须与接收单位集体户首页一致）</th>
                <td style="vertical-align: middle;" colspan="4">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;" colspan="2">拟落户公安分局派出所<br>（必须与接收单位集体户首页一致）</th>
                <td style="vertical-align: middle;" colspan="4">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;" colspan="2">毕业生手机号码</th>
                <td style="vertical-align: middle;" colspan="4">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;">填表人</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
                <th style="width:120px; vertical-align: middle;">办公电话</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
                <th style="width:120px; vertical-align: middle;">手机</th>
                <td style="vertical-align: middle;">
                  <el-form-item prop="title">
                    <el-input v-model="editForm.title" style="width:300px"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th style="width:120px; vertical-align: middle;" colspan="2">填表日期</th>
                <td style="vertical-align: middle;" colspan="4">
                  <el-form-item prop="title">
                  <el-form-item prop="title">
                    <el-date-picker
                      v-model="editForm.title"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  </el-form-item>
                </td>
              </tr>
            </table>
            填表依据为：以户籍卡或户口迁移卡、学历证、学位证。
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click.native="addFormSubmit" :loading="addLoading">提交</el-button>
            <el-button @click.native="addFormVisible = false">取消</el-button>
          </div>
        </el-dialog>
        <el-table :data="list1" highlight-current-row v-loading="listLoading" style="width: 100%;margin-bottom: 20px;">
          <el-table-column type="index" label="序号" width="60" align="center">
          </el-table-column>
          <el-table-column prop="unitName" label="单位名称" min-width="150">
          </el-table-column>
          <el-table-column prop="sy" label="姓名" width="80" align="center">
          </el-table-column>
          <el-table-column prop="sy" label="手机号码" width="150" align="center">
          </el-table-column>
          <el-table-column prop="tx" label="户口迁出地详细地址" width="170" align="center">
          </el-table-column>
          <el-table-column prop="tx" label="迁出地户口登记机关" width="170" align="center">
          </el-table-column>
          <el-table-column prop="tx" label="户口迁入地详细地址" width="170" align="center">
          </el-table-column>
          <el-table-column prop="tx" label="迁入地户口登记机关" width="170" align="center">
          </el-table-column>
          <el-table-column label="操作" width="120" v-if="canEdit" :key="edit">
            <template slot-scope="scope">
              <template>
                <el-dropdown split-button  @click="handleDetail(scope.row.id)" size="small" type="primary" :loading="btnLoading">
                  修改
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleDel(scope.row.id)" >删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" v-else key="detail">
            <template slot-scope="scope">
              <template>
                <el-button @click="addFormVisible1=true" size="small" type="primary">查看</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
    <el-button icon="el-icon-s-promotion" type="success" style="margin-bottom:20px" v-if="canEdit">提交</el-button>
    <el-button icon="el-icon-s-release" type="danger" style="margin-bottom:20px" v-else>退回</el-button>
  </div>
</template>
<script>
export default {
  props: {
    timestamp: '',
    canEdit: null
  },
  data () {
    return {
      addLoading: false,
      btnLoading: false,
      fileList: [],
      editForm: {zhidu: [], zhidu2: []},
      addFormVisible1: false,
      addFormVisible2: false,
      startYear: '2021',
      list1: [{unitName: '自然资源部不动产登记中心（自然资源部法律事务中心）'}],
      topersonlist: [],
      activeNameHuiqian: 'Fangan',
      huiqiandata: {
        Fangan: {},
        HS_HuiYiYiCheng: {}
      },
      Fangansrc: '',
      showPDFVisible: false,
      YijianDuixiang: '全部（总结提炼）',
      listLoading: false,
      BanziPersonName: '全部',
      pdfviewersrc: '',
      TanhuaDuixiang: '全部',
      pdfpage: 1,
      FujianFilename: '',
      pdfviewersrcFujian: '',
      showPDFVisibleFujian: false
    }
  },
  watch: {
    timestamp (val) {
      this.loaddata()
    },
    canEdit (val) {
      console.log(val)
    },
    '$store.state.link_hq' (val) {
      this.activeNameHuiqian = this.$store.state.link_hq
    }
    // $refs.tree2.getCurrentNode()
  },
  computed: {
    filterList: function () {
      let key = this.BanziPersonName
      let key2 = this.TanhuaDuixiang
      let oldList = this.huiqiandata.HQ_TanHua
      if (key === '全部' && key2 === '全部') {
        return oldList
      }
      if (key2 === '全部') {
        return oldList.filter(function (item) {
          return item.BanziPersonName === key
        })
      }
      if (key === '全部') {
        return oldList.filter(function (item) {
          return item.Duixiang === key2
        })
      }
      return oldList.filter(function (item) {
        return item.Duixiang === key2 && item.BanziPersonName === key
      })
    },
    dxfilterList: function () {
      let key = this.YijianDuixiang
      let oldList = this.huiqiandata.HQ_YiJianYuanShi
      if (key === '全部（总结提炼）') {
        return this.huiqiandata.HQ_YiJianZongJie
      }
      return oldList.filter(function (item) {
        return item.Fanweileixing === key
      })
    },
    SumYijianTiaoshu: function () {
      let s = 0
      if (this.dxfilterList) {
        this.dxfilterList.forEach(function (val) {
          s += val.Tiaoshu
        })
      }
      return s
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    MyGetDateStr (date) { // author: meizz\
      let fmt = 'yyyy-MM-dd'
      if (date) {
        // date = date.replace(new RegExp(/-/gm), '/')
        let mydate = new Date(date)
        var o = {
          'M+': mydate.getMonth() + 1, // 月份
          'd+': mydate.getDate(), // 日
          'h+': mydate.getHours(), // 小时
          'm+': mydate.getMinutes(), // 分
          's+': mydate.getSeconds(), // 秒
          'q+': Math.floor((mydate.getMonth() + 3) / 3), // 季度
          'S': mydate.getMilliseconds() // 毫秒
        }
        if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (mydate.getFullYear() + '').substr(4 - RegExp.$1.length)) }
        for (var k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
        }
        return fmt
      } else {
        return null
      }
    },
    changetopersonlist () {
      this.TanhuaDuixiang = '全部'
      let _this = this
      if (this.BanziPersonName === '全部') {
        this.topersonlist = _this.huiqiandata.HQ_TanHua_ToPerson
        console.log('this.topersonlist')
        console.log(this.topersonlist.length)
      } else {
        this.topersonlist = []
        this.huiqiandata.HQ_TanHua.forEach(function (item) {
          if (item.BanziPersonName === _this.BanziPersonName) {
            _this.topersonlist.push({Name: item.Duixiang})
          }
        })
      }
    },
    tabClick () {
      var params = {Link_hq: this.activeNameHuiqian}
      this.$store.commit('tablink_hq', params)
    },
    pinggushow () {
      var params1 = {Link1: 'Pingjia'}
      this.$store.commit('tablink1', params1)
    },
    // showfile (filename, filepathname) {
    //   window.open(this.$http.defaults.baseURL + 'shenghuohui/getfujian/' + this.$route.params.id + '?filepathname=' + filepathname + '&t=' + new Date())
    // },
    showfile (filename, filepathname) {
      window.open(this.$http.defaults.baseURL + this.$http.defaults.shenghuohuiAPI + 'api/shenghuohui/getfujian?unitId=' + this.$route.params.id + '&filepathname=' + filepathname + '&t=' + new Date())
    },
    pdfshow () {
      window.open(this.basesrc + new Date())
    },
    dateFormat: function (row, column) {
      var date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return this.MyGetDateStr(date)
    },
    loaddata: function () {
      let _this = this
      _this.listLoading = true
      // let para = {
      //   id: this.$route.params.id
      // }
      // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
      // this.$http
      //   // .post(`/shenghuohui/unithuiqian`, para)
      //   .get(this.$http.defaults.shenghuohuiAPI + `api/shenghuohui/unitHuiQian?unitId=` + this.$route.params.id)
      //   .then(function (response) {
      //     _this.listLoading = false
      //     if (response.data.success === true) {
      //       console.log('获取成功')
      //       _this.huiqiandata = response.data.result
      //       _this.topersonlist = _this.huiqiandata.HQ_TanHua_ToPerson
      //       _this.changetopersonlist()
      //       if (_this.huiqiandata.Fangan.CanRead === true) {
      //         _this.basesrc = _this.$http.defaults.baseURL + _this.$http.defaults.shenghuohuiAPI + 'api/shenghuohui/getfanganpdf?unitId=' + _this.$route.params.id + '&t=' + new Date()
      //         _this.Fangansrc = _this.$http.defaults.baseURL + _this.$http.defaults.shenghuohuiAPI + 'api/shenghuohui/getfanganpdf?unitId=' + _this.$route.params.id + '&t=' + new Date()
      //         console.log('最新url：' + _this.Fangansrc)
      //       }
      //     } else {
      //       console.log('获取数据失败:' + response.data.message)
      //       _this.$message({
      //         message: '获取数据失败:' + response.data.message,
      //         type: 'error'
      //       })
      //     }
      //   })
      //   .catch(function (error) {
      //     console.log(error)
      //     _this.$message({
      //       message: '网络获取失败:' + error,
      //       type: 'error'
      //     })
      //     _this.listLoading = false
      //   })
    }
  }
}
</script>
<style scoped>
  .mytable{
    border-top: 1px solid #74a6cc;
    border-left: 1px solid #74a6cc;
    margin:0 10px 10px;
    width: calc(100% - 20px);
  }
  .mytable th{
    padding: 10px;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    vertical-align: top;
    line-height: 150%;
    background: #FAFAFA;
    width:200px;
    text-align:right;
  }
  .mytable td{
    padding: 10px;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    vertical-align: top;
    line-height: 150%;
  }
</style>
<style>
#recruitTable .el-table{
  border:1px solid #95B8E7 !important;
}
#recruitTable .el-table td, #recruitTable .el-table th{
  border-right:1px solid #95B8E7 !important;
  border-bottom:1px solid #95B8E7 !important;
}
</style>
